<template>
  <section class="container clearfix" v-if="result">
    <div class="content-wrap clearfix">
      <div class="content">
        <article class="excerpt clearfix" :class="{'excerpt-img':item.articles_img}"  v-for="(item,index) in result.data.articles" :key="item+index">
          <div class="excerpt-img-box" v-if="item.articles_img">
            <nuxt-link :to="`/articles/${item.id}`" class="excerpt-img-href" >
              <img :src="item.articles_img" alt="">
            </nuxt-link>
          </div>
          <header>
            <nuxt-link class="label" :to="`/category/${item.category_id}`">{{item.category_name}}</nuxt-link>
            <h2><nuxt-link :to="`/articles/${item.id}`">{{item.title}}</nuxt-link></h2>
          </header>
          <p class="note">{{item.introduction}}</p>
        </article>
        <div class="pagination" v-if="result.data.pageCount>1">
           <ul>
             <li v-for="(item,index) in result.data.pageCount" :key="item+index">
               <nuxt-link v-if="item != result.data.curPage" :to="{name:'articles',query:{page:item}}" >{{item}}</nuxt-link>
               <span v-else>{{item}}</span>
             </li>
           </ul>
        </div>
      </div>
    </div>
    <my-right :tags="result.data.tags"></my-right>
  </section>
</template>

<script>
import axios from "~/plugins/axios";
import MyRight from '~/components/Right.vue';
export default {
  asyncData({ params, query,error,redirect }) {
    return redirect('/articles');
    let url = '/api/allData';
    if(query.page){
      url = `/api/allData?page=${+query.page?query.page:1}`;
    }
    return axios
      .get(url)
      .then(resp => {
        let { data } = resp;
        return { result: data };
      })
      .catch(e => {
        error({ statusCode: 500, message: `${e}` });
      });
  },
  components:{
    MyRight
  }
};
</script>
